<template>
  <div class="app-container">
    <el-table
      :data="tableData.visibleRows"
      border
      style="width: 100%"
      max-height="600"
      :cell-style="columnStyle"
    >
      <el-table-column
        v-for="(column, index) in tableData.visibleColumns"
        :key="index"
        :prop="index.toString()"
        :label="column"
        :width="getColumnWidth(index)">

      >
        <template slot-scope="scope">
          {{ scope.row[index] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAllIndicators } from '@/api/data_analysis/baseData.js'

export default {
  name: 'DataTable',
  props: {
    // 从父组件接收参数
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  watch: {
    // 监听params变化，重新获取数据
    params: {
      handler(newVal) {
        this.getList()
      },
      deep: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.params.columnOrder = [0,1,2,14,15,16,17,18,19,3,4,5,6,7,8,20,21,22,23,24,25,9,10,11,12,13]
      this.params.hiddenColumns= [4,6,14,16,18,10,12,20,22,24]
      getAllIndicators(this.params).then((response) => {
        this.tableData = response.data
        console.log(this.tableData)
      })
    },
    removeMultipleElements(array, indices) {
      // 对索引进行排序（从大到小）
      const sortedIndices = indices.sort((a, b) => b - a)

      // 从大到小删除元素（避免删除后索引变化的问题）
      sortedIndices.forEach(index => {
        array.splice(index, 1)
      })

      return array
    },

    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 2 || columnIndex == 9) {
        // return 'background:	#f5f5f5;'
        return {
          backgroundColor: '#f5f5f5',
          width: 100,
        }
      }
    },
    getColumnWidth(columnIndex) {
      if (columnIndex === 0 || columnIndex === 2 || columnIndex === 9) {
        return '100';
      }
      return '';  // 自适应宽度
    },
  }
}
</script>

<style scoped>
/* 可以添加组件特定的样式 */
</style>
